<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新仙二宠物加点模拟器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            text-align: center;
            padding: 30px;
            font-size: 28px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .main-content {
            padding: 30px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px;
        }

        .section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 3px solid #667eea;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .attribute-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .attribute-name {
            font-weight: bold;
            min-width: 60px;
            color: #333;
        }

        .attribute-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background: #5a6fd8;
        }

        .btn:active {
            transform: translateY(1px);
        }
        
        .btn-sm:active {
            background: #4a5fd1 !important;
            transform: scale(0.95);
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
            min-width: 30px;
        }

        .btn-random {
            background: #28a745;
            width: 100%;
            margin-top: 15px;
            padding: 12px;
            font-size: 16px;
        }

        .btn-random:hover {
            background: #218838;
        }

        .attribute-value {
            font-weight: bold;
            color: #333;
            min-width: 40px;
            text-align: center;
            background: transparent;
            border: 1px solid transparent;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .attribute-value:hover {
            background: #f0f0f0;
            border-color: #ddd;
        }
        
        .attribute-input {
            font-weight: bold;
            color: #333;
            min-width: 40px;
            text-align: center;
            background: white;
            border: 2px solid #667eea;
            padding: 4px 8px;
            border-radius: 4px;
            outline: none;
            font-size: 14px;
        }

        .stat-display {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .stat-name {
            font-weight: bold;
            color: #555;
        }

        .stat-value {
            font-weight: bold;
            color: #667eea;
        }

        .remaining-points {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #e74c3c;
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .aptitude-range {
            font-size: 12px;
            color: #666;
            margin-top: 2px;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .header {
                padding: 20px;
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            🐲 新仙二宠物加点模拟器 🐲
        </div>
        
        <div class="main-content">
            <!-- 基础设置区域 -->
            <div class="section">
                <div class="section-title">⚙️ 基础设置</div>
                
                <div class="form-group">
                    <label for="level">等级:</label>
                    <input type="number" id="level" min="0" max="150" value="0">
                </div>
                
                <div class="remaining-points">
                    剩余属性点: <span id="remainingPoints">0</span>
                </div>
                
                <div class="attribute-row">
                    <span class="attribute-name">体质</span>
                    <div class="attribute-controls">
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('constitution', -1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('constitution', -1)">-</button>
                        <span class="attribute-value" id="constitution" 
                              onclick="startEdit('constitution')"
                              title="点击编辑数值">10</span>
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('constitution', 1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('constitution', 1)">+</button>
                    </div>
                </div>
                
                <div class="attribute-row">
                    <span class="attribute-name">魔力</span>
                    <div class="attribute-controls">
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('magic', -1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('magic', -1)">-</button>
                        <span class="attribute-value" id="magic" 
                              onclick="startEdit('magic')"
                              title="点击编辑数值">10</span>
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('magic', 1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('magic', 1)">+</button>
                    </div>
                </div>
                
                <div class="attribute-row">
                    <span class="attribute-name">力量</span>
                    <div class="attribute-controls">
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('strength', -1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('strength', -1)">-</button>
                        <span class="attribute-value" id="strength" 
                              onclick="startEdit('strength')"
                              title="点击编辑数值">10</span>
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('strength', 1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('strength', 1)">+</button>
                    </div>
                </div>
                
                <div class="attribute-row">
                    <span class="attribute-name">耐力</span>
                    <div class="attribute-controls">
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('endurance', -1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('endurance', -1)">-</button>
                        <span class="attribute-value" id="endurance" 
                              onclick="startEdit('endurance')"
                              title="点击编辑数值">10</span>
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('endurance', 1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('endurance', 1)">+</button>
                    </div>
                </div>
                
                <div class="attribute-row">
                    <span class="attribute-name">敏捷</span>
                    <div class="attribute-controls">
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('agility', -1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('agility', -1)">-</button>
                        <span class="attribute-value" id="agility" 
                              onclick="startEdit('agility')"
                              title="点击编辑数值">10</span>
                        <button class="btn btn-sm" 
                                onmousedown="startLongPress('agility', 1)" 
                                onmouseup="stopLongPress()" 
                                onmouseleave="stopLongPress()"
                                onclick="changeAttribute('agility', 1)">+</button>
                    </div>
                </div>
            </div>
            
            <!-- 资质设置区域 -->
            <div class="section">
                <div class="section-title">📊 资质设置</div>
                
                <div class="form-group">
                    <label for="attackApt">攻击资质:</label>
                    <input type="number" id="attackApt" min="900" max="1800" value="1350">
                    <div class="aptitude-range">范围: 900-1800</div>
                </div>
                
                <div class="form-group">
                    <label for="defenseApt">防御资质:</label>
                    <input type="number" id="defenseApt" min="850" max="1700" value="1275">
                    <div class="aptitude-range">范围: 850-1700</div>
                </div>
                
                <div class="form-group">
                    <label for="hpApt">体力资质:</label>
                    <input type="number" id="hpApt" min="3500" max="7000" value="5250">
                    <div class="aptitude-range">范围: 3500-7000</div>
                </div>
                
                <div class="form-group">
                    <label for="mpApt">法力资质:</label>
                    <input type="number" id="mpApt" min="2100" max="4200" value="3150">
                    <div class="aptitude-range">范围: 2100-4200</div>
                </div>
                
                <div class="form-group">
                    <label for="speedApt">速度资质:</label>
                    <input type="number" id="speedApt" min="300" max="600" value="450">
                    <div class="aptitude-range">范围: 300-600</div>
                </div>
                
                <div class="form-group">
                    <label for="growth">成长:</label>
                    <input type="number" id="growth" min="1" max="1.5" step="0.01" value="1.25">
                    <div class="aptitude-range">范围: 1.00-1.50</div>
                </div>
                
                <button class="btn btn-random" onclick="randomizeAptitudes()">🎲 随机资质</button>
            </div>
            
            <!-- 属性显示区域 -->
            <div class="section">
                <div class="section-title">📈 宠物属性</div>
                
                <div class="stat-display">
                    <div class="stat-row">
                        <span class="stat-name">🔥 体力:</span>
                        <span class="stat-value" id="finalHp">0</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-name">💙 真气:</span>
                        <span class="stat-value" id="finalMp">0</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-name">⚔️ 攻击:</span>
                        <span class="stat-value" id="finalAttack">0</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-name">🛡️ 防御:</span>
                        <span class="stat-value" id="finalDefense">0</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-name">✨ 灵力:</span>
                        <span class="stat-value" id="finalSpirit">0</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-name">💨 身法:</span>
                        <span class="stat-value" id="finalSpeed">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 宠物数据
        let petData = {
            level: 0,
            constitution: 10,
            magic: 10,
            strength: 10,
            endurance: 10,
            agility: 10,
            attackApt: 1350,
            defenseApt: 1275,
            hpApt: 5250,
            mpApt: 3150,
            speedApt: 450,
            growth: 1.25
        };
        
        // 长按相关变量
        let longPressTimer = null;
        let longPressAttribute = null;
        let longPressChange = 0;
        let longPressSpeed = 200; // 初始速度 (毫秒)
        let longPressCount = 0;
        let isLongPressing = false;
        
        // 编辑相关变量
        let currentEditingAttribute = null;
        let originalValue = 0;

        // 初始化
        function init() {
            updateLevel();
            calculateStats();
            
            // 绑定事件监听器
            document.getElementById('level').addEventListener('change', updateLevel);
            
            const aptitudeInputs = ['attackApt', 'defenseApt', 'hpApt', 'mpApt', 'speedApt', 'growth'];
            aptitudeInputs.forEach(id => {
                document.getElementById(id).addEventListener('input', () => {
                    petData[id] = parseFloat(document.getElementById(id).value);
                    calculateStats();
                });
            });
        }

        // 更新等级
        function updateLevel() {
            const newLevel = parseInt(document.getElementById('level').value);
            const oldLevel = petData.level;
            petData.level = newLevel;
            
            // 计算等级变化带来的点数变化
            const levelDiff = newLevel - oldLevel;
            const pointsChange = levelDiff * 10;
            
            // 获取当前剩余点数并更新
            const currentRemainingPoints = getRemainingPoints();
            const newRemainingPoints = currentRemainingPoints + pointsChange;
            
            // 如果新的剩余点数为负数，说明当前分配的点数超过了新等级允许的总点数
            // 需要重新分配属性点
            if (newRemainingPoints < 0) {
                // 重置到基础状态：每个属性10点
                petData.constitution = 10;
                petData.magic = 10;
                petData.strength = 10;
                petData.endurance = 10;
                petData.agility = 10;
                
                // 重新计算剩余点数
                const basePoints = 50; // 5个属性 × 10点
                const totalAvailablePoints = basePoints + (newLevel * 10);
                const newRemainingPoints = totalAvailablePoints - basePoints;
                
                updateRemainingPoints(newRemainingPoints);
            } else {
                updateRemainingPoints(newRemainingPoints);
            }
            
            updateAttributeDisplay();
            calculateStats();
        }

        // 改变属性点
        function changeAttribute(attributeName, change) {
            const currentValue = petData[attributeName];
            const newValue = currentValue + change;
            
            // 检查是否可以减少（不能低于10点）
            if (change < 0 && newValue < 10) {
                return;
            }
            
            // 检查是否有足够的剩余点数
            const remainingPoints = getRemainingPoints();
            if (change > 0 && remainingPoints < change) {
                return;
            }
            
            petData[attributeName] = newValue;
            updateAttributeDisplay();
            updateRemainingPoints(remainingPoints - change);
            calculateStats();
        }

        // 获取剩余属性点
        function getRemainingPoints() {
            const basePoints = 50; // 5个属性基础各10点
            const levelPoints = petData.level * 10; // 每级10点
            const totalAvailablePoints = basePoints + levelPoints;
            const usedPoints = petData.constitution + petData.magic + petData.strength + petData.endurance + petData.agility;
            return totalAvailablePoints - usedPoints;
        }

        // 更新属性显示
        function updateAttributeDisplay() {
            document.getElementById('constitution').textContent = petData.constitution;
            document.getElementById('magic').textContent = petData.magic;
            document.getElementById('strength').textContent = petData.strength;
            document.getElementById('endurance').textContent = petData.endurance;
            document.getElementById('agility').textContent = petData.agility;
        }

        // 更新剩余点数显示
        function updateRemainingPoints(points) {
            document.getElementById('remainingPoints').textContent = points;
        }

        // 随机资质
        function randomizeAptitudes() {
            petData.attackApt = Math.floor(Math.random() * (1800 - 900 + 1)) + 900;
            petData.defenseApt = Math.floor(Math.random() * (1700 - 850 + 1)) + 850;
            petData.hpApt = Math.floor(Math.random() * (7000 - 3500 + 1)) + 3500;
            petData.mpApt = Math.floor(Math.random() * (4200 - 2100 + 1)) + 2100;
            petData.speedApt = Math.floor(Math.random() * (600 - 300 + 1)) + 300;
            petData.growth = Math.round((Math.random() * (1.5 - 1) + 1) * 100) / 100;
            
            // 更新输入框显示
            document.getElementById('attackApt').value = petData.attackApt;
            document.getElementById('defenseApt').value = petData.defenseApt;
            document.getElementById('hpApt').value = petData.hpApt;
            document.getElementById('mpApt').value = petData.mpApt;
            document.getElementById('speedApt').value = petData.speedApt;
            document.getElementById('growth').value = petData.growth;
            
            calculateStats();
        }

        // 计算宠物属性
        function calculateStats() {
            const level = petData.level;
            const growth = petData.growth;
            
            // 体力=等级*体力资质/1000+体质点数*成长*6
            const hp = Math.floor(level * petData.hpApt / 1000 + petData.constitution * growth * 6);
            
            // 真气=等级*法力资质/500+魔力点数*成长*3
            const mp = Math.floor(level * petData.mpApt / 500 + petData.magic * growth * 3);
            
            // 攻击=[(等级*攻击资质/1000)*4/3*(1.4+成长)]+(力量点数*成长)
            const attack = Math.floor((level * petData.attackApt / 1000) * 4 / 3 * (1.4 + growth) + petData.strength * growth);
            
            // 防御=[(等级*防御资质/1000)*7/8*(1.4+成长)]+(耐力点数*成长*1.33)
            const defense = Math.floor((level * petData.defenseApt / 1000) * 7 / 8 * (1.4 + growth) + petData.endurance * growth * 1.33);
            
            // 灵力=[等级*(法力资质*3+5000)/10000]+(体质点数*0.3)+(耐力点数*0.2)+(力量点数*0.4)+(法力点数*0.7)
            const spirit = Math.floor(level * (petData.mpApt * 3 + 5000) / 10000 + 
                                    petData.constitution * 0.3 + 
                                    petData.endurance * 0.2 + 
                                    petData.strength * 0.4 + 
                                    petData.magic * 0.7);
            
            // 身法=敏捷点数*速度资质/10000
            const speed = 20 + Math.floor(petData.agility * petData.speedApt / 10000);
            
            // 更新显示
            document.getElementById('finalHp').textContent = hp;
            document.getElementById('finalMp').textContent = mp;
            document.getElementById('finalAttack').textContent = attack;
            document.getElementById('finalDefense').textContent = defense;
            document.getElementById('finalSpirit').textContent = spirit;
            document.getElementById('finalSpeed').textContent = speed;
        }

        // 长按开始
        function startLongPress(attributeName, change) {
            // 防止重复触发
            if (isLongPressing) return;
            
            longPressAttribute = attributeName;
            longPressChange = change;
            longPressSpeed = 200; // 重置速度
            longPressCount = 0;
            isLongPressing = true;
            
            // 延迟500ms后开始长按效果
            longPressTimer = setTimeout(() => {
                continueLongPress();
            }, 500);
        }
        
        // 继续长按
        function continueLongPress() {
            if (!isLongPressing) return;
            
            // 执行属性变更
            changeAttribute(longPressAttribute, longPressChange);
            longPressCount++;
            
            // 计算加速：每5次操作速度提升20%，最快50ms
            if (longPressCount % 5 === 0 && longPressSpeed > 10) {
                longPressSpeed = Math.max(10, longPressSpeed * 0.8);
            }
            
            // 设置下一次触发
            longPressTimer = setTimeout(() => {
                continueLongPress();
            }, longPressSpeed);
        }
        
        // 停止长按
        function stopLongPress() {
            if (longPressTimer) {
                clearTimeout(longPressTimer);
                longPressTimer = null;
            }
            isLongPressing = false;
            longPressAttribute = null;
            longPressChange = 0;
            longPressCount = 0;
        }
        
        // 开始编辑属性值
        function startEdit(attributeName) {
            // 如果正在编辑其他属性，先完成之前的编辑
            if (currentEditingAttribute && currentEditingAttribute !== attributeName) {
                finishEdit(false);
            }
            
            // 如果正在长按，停止长按
            if (isLongPressing) {
                stopLongPress();
            }
            
            currentEditingAttribute = attributeName;
            originalValue = petData[attributeName];
            
            const element = document.getElementById(attributeName);
            const currentValue = petData[attributeName];
            
            // 创建输入框
            const input = document.createElement('input');
            input.type = 'number';
            input.value = currentValue;
            input.min = '10';
            input.className = 'attribute-input';
            input.id = attributeName + '_input';
            
            // 替换显示元素
            element.style.display = 'none';
            element.parentNode.insertBefore(input, element.nextSibling);
            
            // 聚焦并选中内容
            input.focus();
            input.select();
            
            // 绑定事件
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    finishEdit(true);
                } else if (e.key === 'Escape') {
                    finishEdit(false);
                }
            });
            
            input.addEventListener('blur', function() {
                finishEdit(true);
            });
        }
        
        // 完成编辑
        function finishEdit(apply) {
            if (!currentEditingAttribute) return;
            
            const attributeName = currentEditingAttribute;
            const element = document.getElementById(attributeName);
            const input = document.getElementById(attributeName + '_input');
            
            if (input) {
                if (apply) {
                    const newValue = parseInt(input.value);
                    
                    // 验证输入值
                    if (!isNaN(newValue) && newValue >= 10) {
                        // 计算点数变化
                        const pointChange = newValue - petData[attributeName];
                        const remainingPoints = getRemainingPoints();
                        
                        // 检查是否有足够的剩余点数
                        if (pointChange <= remainingPoints) {
                            // 应用新值
                            petData[attributeName] = newValue;
                            updateAttributeDisplay();
                            updateRemainingPoints(remainingPoints - pointChange);
                            calculateStats();
                        } else {
                            // 点数不足，显示提示
                            alert(`点数不足！最多还能分配 ${remainingPoints} 点`);
                            // 恢复原值
                            element.textContent = petData[attributeName];
                        }
                    } else {
                        // 输入无效，恢复原值
                        alert('请输入有效数值（最小值为10）');
                        element.textContent = petData[attributeName];
                    }
                } else {
                    // 取消编辑，恢复原值
                    element.textContent = petData[attributeName];
                }
                
                // 移除输入框，显示原元素
                input.remove();
                element.style.display = '';
            }
            
            currentEditingAttribute = null;
            originalValue = 0;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
        
        // 防止右键菜单干扰长按功能
        document.addEventListener('contextmenu', function(e) {
            if (e.target.classList.contains('btn-sm')) {
                e.preventDefault();
            }
        });
    </script>
</body>
</html>